<!--
 * @Author: bln
 * @Date: 2024-04-03 00:00:00
 * @FilePath: zmglpt-ui-mobile-v1.1\dev\pages\tag\retailerTag
 * @Description: 零售户贴标功能-列表
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack"></theme-navbar>
    <!-- #endif -->
    <view class="u-p-t-30 u-p-b-30">
      <u-search
      shape="round"
      :clearabled="true"
      :showAction="true"
      actionText="确定"
      :animation="true"
      placeholder="许可证、企业字号、持证人、地址、电话等"
      v-model="keyWord"
      @custom="handlerSearch"
      class="u-m-l-20 u-m-r-20" />
    </view>
    <me-table :i="0" :top="108" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
      <template #default="d">
        <view class="card" @tap="addTag(d.data)">
          <view class="re-manager">
            <text class="re-title">{{ d.data.companyName }}</text>
            <u-tag v-if="d.data.licStatus" class="tag" :spStyle="sysCodeColors[d.data.licStatus] || {}" mode="dark" shape="circle" :text="d.data.licStatusName"></u-tag>
          </view>
          <view class="re-subtitle">{{ d.data.businessAddr }}</view>
          <u-row class="u-m-t-20">
            <u-col span="3">
              <u-icon :label="d.data.managerName || ''" size="30" name="/static/check/manager.png"></u-icon>
            </u-col>
            <u-col span="5">
              <u-icon :label="d.data.retailTel || ''" size="30" name="phone" @click.native="modelConfirm"></u-icon>
            </u-col>
          </u-row>
          <u-row class="u-m-t-20 tagInfo">
            <u-tag v-for="item, index in d.data.tagHostDataVoList" :key="index" class="u-m-r-10" mode="plain" :text="getTagNames(item)" />
          </u-row>
          <!-- 提示框 modelContent -->
          <u-modal v-model="modelShow" :content="modelContent" @confirm="doPhoneNew(d.data.retailTel)"></u-modal>
        </view>
      </template>
    </me-table>
  </view>
</template>

<script>
import meTable from '@/components/me-table.vue'
import checkService from '@/service/check/check.service'
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js'

const sysCodeColors = {
  '07': {
    color: '#EC7C37',
    borderColor: '#EC7C37',
    backgroundColor: '#FBE2D3',
  },
  '04': {
    color: '#01A79A',
    borderColor: '#01A79A',
    backgroundColor: '#C0ECE2',
  },
  '01': {
    color: '#AC0000',
    borderColor: '#AC0000',
    backgroundColor: '#F2CCCC',
  },
  '06': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
  '08': {
    color: '#0079F2',
    borderColor: '#0079F2',
    backgroundColor: '#E0ECFF',
  },
  '02': {
    color: '#717579',
    borderColor: '#717579',
    backgroundColor: '#EDEEEF',
  },
  '05': {
    color: '#20AB5C',
    borderColor: '#20AB5C',
    backgroundColor: '#DBF4E6',
  },
  '03': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
};
export default {
  components: { meTable },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      sysCodeColors,
      modelShow: false,
      tels: [],
      keyWord: '',
      attrCode: '',
      modelContent: '',
      user: this.$storage.get(this.$rp.common.USER),
    };
  },
  onLoad(opt) {
    this.attrCode = opt.attrCode || ''
  },
  methods: {
    // 零售户列表数据查询
    loadData(page) {
      const params = {
        page: page.num,
        limit: page.size,
        keyWord: this.keyWord,
        attrCode: this.attrCode,
        licStatus: ['01', '02', '10']
      }
      return checkService.getLicenseTagList(params)
    },
    // 获取标签信息
    getTagNames(tag) {
      if(tag.tagType === '01') {
        return tag.tagName
      } else if(tag.tagType === '02') {
        return `${tag.tagName}: ${tag.valName || ''}`
      } else {
        return `${tag.tagName}: ${tag.val || ''}`
      }
    },
    // 模糊查询
    handlerSearch() {
      this.getMescroll(0).triggerDownScroll()
    },
    // 贴标
    addTag(obj) {
      this.setRouteParam({
        retailerUuid: obj.retailerUuid || '',
        selectedTags: JSON.parse(JSON.stringify(obj.tagHostDataVoList)) || []
      })
      this.$u.route({ url: 'pages/tag/retailerTag/addTag' })
    },
    // 保存返回刷新
    updateBackState() {
      this.handlerSearch()
    },
    // 电话显示
    handlerShowPhone(e, retailerUuid) {
      this.$u.loading('查询中...')
      this.tels = [];
      checkService.retailerTels(retailerUuid).then((dr) => {
        this.$u.hideLoading()
        if (dr.success) {
          let telDatas = dr.data;
          telDatas.forEach((t) => {
            t.tel && this.tels.push(t.name + ' ' + t.tel)
          })
          uni.showActionSheet({
            itemList: this.tels,
            itemColor: '#007aff',
            success: ({ tapIndex, }) => this.doPhone(this.tels[tapIndex])
          })
        }
      })
    },
    // 拨打电话
    doPhone(telStr) {
      let tel = telStr.substring(telStr.indexOf(' '))
      this.$deviceApi.makePhoneCall(tel)
    },
    // 拨打电话
    doPhoneNew(telStr) {
      if (this.$u.test.isEmpty(telStr)) return
      // #ifdef H5-DINGDING
      this.$deviceApi.makePhoneCall(telStr)
      // #endif
      // #ifndef H5-DINGDING
      this.$u.toast('H5不支持打电话')
      // #endif
    },
    // 拨打电话
    modelConfirm(e) {
      e.stopPropagation()
      e.preventDefault()
      this.modelShow = true
      this.modelContent = '是否打给零售户'
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'style/certificate/common.scss';
.page {
  padding: 0;
}
.tag {
  flex-shrink: 0;
  height: fit-content;
}
.card {
  padding: 20rpx;
}
.active {
  color: #19be6b;
}
.tagInfo {
  .u-tag {
    margin: 0px 5px 5px 0px;
  }
}
.re-manager {
  display: flex;
  justify-content: space-between;
  .re-title {
    width: calc(90%);
    font-size: 15px;
    color: #666;
    font-weight: 600;
    margin-bottom: 5px;
    width: 80%;
  }
}
.re-subtitle {
  padding-top: 5px;
  color: #666;
}
.mescroll-body {
  padding-top: 0px!important;
}
</style>
